<template>
  <el-dropdown trigger="click" @command="changeLanguage">
    <div>
      <svg-icon icon-class="language" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="'zh'===$i18n.locale" command="zh">简体中文</el-dropdown-item>
      <el-dropdown-item :disabled="'en'===$i18n.locale" command="en">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import Cookie from 'js-cookie'
import { setLanguage } from '@/api/user'
export default ({
  data() {
    return {
      formData: {
        uid: parseFloat(Cookie.get('userId')),
        language: ''
      }
    }
  },
  methods: {
    async changeLanguage(lang) {
      try {
        this.formData.language = lang
        await setLanguage(this.formData)
        Cookie.set('language', lang)// cookie存入当前选择的语言
        this.$i18n.locale = lang// 设置本地的i18n插件
        this.$message.success(this.$t('prompt.SwitchingSuccessful'))
      } catch (error) {
        this.$message.error(this.$t('prompt.SwitchingError'))
      }
    }
  }
})
</script>
